
//下拉菜单功能
class Pullmenu {
    constructor() {
        $('.xl').hover(function () {
            $(this).next().stop().animate({
                height: "220px"
            })
        }, function () {
            $(this).next().stop().animate({
                height: "0"
            })
        })
        // 
        $(".xl").next().hover(function () {
            $(this).stop().animate({
                height: "220px"
            })
        }, function () {
            $(this).stop().animate({
                height: "0"
            })
        })
    }
}
new Pullmenu()

//放大镜功能
class Big {
    constructor() {
        this.div1 = document.querySelector(".big-p")
        this.div2 = document.querySelector(".shade")
        this.div3 = document.querySelector(".none-bigp")
        this.img2 = document.querySelector(".img2")
        this.info()
    }
    info() {
        this.div1.addEventListener("mouseenter", this.enterFn.bind(this))
        this.div1.addEventListener("mouseleave", this.leaveFn.bind(this))
        this.div1.addEventListener("mousemove", this.moveFn.bind(this))
        this.div3.addEventListener("mouseenter", this.Fn.bind(this))

    }
    Fn() {
        this.div2.style.display = "none"
        this.div3.style.display = "none"
    }
    enterFn() {
        this.div2.style.display = "block"
        this.div3.style.display = "block"
    }
    leaveFn() {
        this.div2.style.display = "none"
        this.div3.style.display = "none"
    }
    moveFn(event) {
        event = event || window.event
        this.tmpx = event.pageX - this.div1.offsetLeft - this.div2.offsetWidth / 2
        this.tmpy = event.pageY - this.div1.offsetTop - this.div2.offsetHeight / 2 - 28
        if (this.tmpx < 0) {
            this.tmpx = 0;
        } else if (this.tmpx > this.div1.offsetWidth - this.div2.offsetWidth) {
            this.tmpx = this.div1.offsetWidth - this.div2.offsetWidth
        }
        if (this.tmpy < 0) {
            this.tmpy = 0;
        } else if (this.tmpy > this.div1.offsetHeight - this.div2.offsetHeight) {
            this.tmpy = this.div1.offsetHeight - this.div2.offsetHeight
        }
        this.div2.style.left = this.tmpx + 'px'
        this.div2.style.top = this.tmpy + 'px'

        var small = this.div1.offsetWidth - this.div2.offsetWidth
        var big = this.img2.offsetWidth - this.div3.offsetWidth
        var bigLeft = big / small * this.tmpx
        var bigTop = big / small * this.tmpy
        this.img2.style.left = -bigLeft + 'px'
        this.img2.style.top = -bigTop + 'px'

    }
}


//读取数据 以及点击功能
class Getdata {
    constructor() {
        this.box = document.querySelector(".big-p")
        this.name = document.querySelector(".name")
        this.price = document.querySelector(".pricespan")
        this.add = document.querySelector(".addcart")
        this.btn1 = document.querySelector(".btn1")
        this.btn2 = document.querySelector(".btn2")
        this.addnum = document.querySelector(".addnum")
        this.init()
    }
    init() {
        //读取数据
        this.load()

    }

    load() {
        //请求list中的所有数据
        $.ajax({
            url: "http://localhost:3000/api/list/list",
            success: (res) => {
                console.log(res);
                this.res = res.data;
                console.log(res);

                this.render()
            }
        })
    }

    //渲染页面
    render() {
        //  截取地址中得search值取到id  该id就是我们点击商品的id（a标签传过来的）
        this.id = location.search.split("?")[1];
        var str = ""
        var str3 = ""
        //判断当cookie的id等于我们json数据的id时  把数据拿出来渲染
        //此处其实也就是一条json数据(和购物车是多条数据)
        for (let i = 0; i < this.res.length; i++) {
            if (this.res[i].id == location.search.split("?")[1]) {
                str += ` <img id=""
                src="${this.res[i].img}"
                alt="" width="508" height="508">
            <div class="shade"></div>
            <div class="none-bigp">
                <img class="img2" src="${this.res[i].img}"
                    alt="" width="1275" height="1275">
            </div>`

                str3 += `<h2 class="info1">
             ${this.res[i].info1}
            <p class="info2"> ${this.res[i].info2}</p>
        </h2>
        <a href="javascript::">加入对比</a>`

                //渲染左侧的图片
                this.box.innerHTML = str
                //渲染右侧的数据信息
                this.name.innerHTML = str3
                //渲染右侧的价格
                this.price.innerHTML = this.res[i].price
                
                // console.log(this.res[i].price);
            }
        }
        //此处可以拿到渲染以后的元素
        //   console.log(this.box.children[0]);
        //等页面渲染以后再调用放大镜等功能 和点击事件 （异步问题）
        new Big
        this.addEvent()
    }
    //页面的点击事件
    addEvent() {
        //增加减少数量
        this.btn1.addEventListener("click", () => {
            if (this.addnum.value == 0) this.addnum.value = 0
            else {
                this.addnum.value--
            }
        })
        this.btn2.addEventListener("click", () => {
            this.addnum.value++
        })
        //加入购物车得时候设置cookie
        this.add.addEventListener("click", () => {
            let userMsg = sessionStorage.getItem("userMsg") ? JSON.parse(sessionStorage.getItem("userMsg")) : {};
            if (userMsg.state == 1) {
                this.setCookie2()
            } else {
                location.href = "load.html"
            }

        })
    }
    //设置物品数量和id的cookie
    setCookie2() {
        this.proMsg2 = getCookie("proMsg2") ? JSON.parse(getCookie("proMsg2")) : [];
        // console.log(this.proMsg);
        //如果cookie存过数据了
        //且存入的数据已经存在了就累加num
        //如果不存在(还没有加入过该商品就正常存)
        if (this.proMsg2.length >= 1) {
            let flag = false;
            let i;
            for (i = 0; i < this.proMsg2.length; i++) {
                if (this.proMsg2[i].id === this.id) {
                    flag = true;
                    break;
                }
            }
            if (flag) {
                this.proMsg2[i].num = this.proMsg2[i].num * 1 + this.addnum.value * 1
            } else {
                this.proMsg2.push({
                    id: this.id,
                    num: this.addnum.value
                })
            }
            //如果cookie里面还没有存数据 就正常存
        } else {
            this.proMsg2.push({
                id: this.id,
                num: this.addnum.value
            })
        }
        setCookie("proMsg2", JSON.stringify(this.proMsg2), {

        })

    }
}
new Getdata()

//点击登录以后 刷新页面改变登录注册样式 (重复功能)
class LoginRegistration {
    constructor() {

        let userMsg = sessionStorage.getItem("userMsg") ? JSON.parse(sessionStorage.getItem("userMsg")) : {};
        if (userMsg.state == 1) {
            let str = `<a href="./load.html">${userMsg.username}</a>
                    <span>|</span>
                     <a class="exit" href="javascript::">退出</a>`
            $(".load").html(str)
            $(".exit").click(function () {
                sessionStorage.removeItem("userMsg");
                let str = `<a href="./load.html">登录</a>`
                $(".load").html(str)
            })
        } else {
            let str = `<a href="./load.html">登录</a>`
            $(".load").html(str)
        }
        //判断  只有登录以后才可以点击购物车
        $(".cart").click(function () {
            if (userMsg.state == 1) {
                location.href = "cart.html"
            } else {
                location.href = "load.html"
            }
        })

    }
}
new LoginRegistration()

